<template>
  <div class="title-page">
    <h1>RedCross Management System</h1>
    <div class="button-group">
      <button @click="login">Login</button>
      <button @click="register">Register</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      this.$router.push("/LoginPage/login");
    },
    register() {
      this.$router.push("/LoginPage/register");
    }
  }
};
</script>

<style scoped>
.title-page {
  position: relative;
  top: -100px;
}

.title-page h1 {
  color: #FFF;
  font-size: 4em;
  padding: 40px 0;
}

.button-group button {
  background-color: #67C23A;
  color: #fff;
  font-size: 17px;
  padding: 10px 30px;
  border: none;
  outline: none;
  border-radius: 8px;
  width: 120px;
}

.button-group button:first-child {
  margin-right: 20px;
}

.button-group button:hover {
  cursor: pointer;
}
</style>